<template>
	<view class="admin ">
		<uni-nav-bar :statusBar="true" title="个人中心" background-color="#fff" color="#333" :border="false" :fixed="true"
			t-font-size="32rpx" @clickLeft="back"></uni-nav-bar>
		<watermark></watermark>
		<scroll-view scroll-y @scrolltolower="getMore">
			<view class="zyjz selector center">
				<view class="selector-li left-radius" :class="{active:tab==='审核中'}" @click="changeTab('审核中')">
					待审核
				</view>
				<view class="selector-li" :class="{active:tab==='仓库管理','right-radius':infoData.type !== 'admin'}"
					@click="changeTab('仓库管理')">
					仓库管理
				</view>
				<view class="selector-li " :class="{active:tab==='人员管理','right-radius':infoData.type === 'admin'}"
					@click="changeTab('人员管理')" v-if="infoData.type === 'admin'">
					人员管理
				</view>
			</view>

			<block v-if="tab === '审核中'">
				<view class="zyjz list pad20" @click="gogo(item,item.type)" v-for="(item,int) in items" :key="int">
					<view class="time f20">
						<view class="mgn-t-10">
							{{item.d}}</br>
							{{item.m}}月
						</view>
					</view>
					<view class="mgn-l-20 f26" v-if="item.type === 'user' || item.type === 'team' || item.type === 'warehouse'">
						<view class="">
							人员信息审核
						</view>
						<view class="clAAA">
							{{item.user_name}}
						</view>
					</view>
					<view class="mgn-l-20 f26" v-else>
						<view class="" v-if="item.type === 'borrows' || item.type === 'returns'">
							班组：{{item.class_name}} ({{item.type === 'borrows'?'借':'还'}})
						</view>
						<view class="" v-else>
							仓库：{{item.warehouse_name}} ({{item.type === 'transfer'?'调仓':'盘点'}})
						</view>
						<view class="clAAA">
							物品：{{item.num}}件
							<text class="mgn-l-60">{{item.user_name}}</text>
						</view>
					</view>
				</view>
			</block>

			<block v-else-if="tab === '仓库管理'">
				<view class="omit1 text-center select mgn-t-20 mgn-b-20" @click="toggle('popup')">
					<text class="uni-nav-bar-text mgn-r-10">{{warehouse.text}}</text>
					<uni-icons type="arrowdown" color="#666" size="18" />
				</view>
				<block v-for="(item,int) in items" :key="int">
					<view class="goods  zyjz f26 cl343 flex-start-c "
						@click="go(`/pages/person/admin/product?id=${item.goods_id}&w_id=${warehouse.id}`)">
						<image :src="item.img" mode="widthFix"></image>
						<view class="mgn-l-20" style="width:68%">
							<view class="zyjz">
								<view class="omit1" style="width: 95%;">
									{{item.goods_name}}
								</view>
								<uni-icons type="right" size="20"></uni-icons>
							</view>

							<view class="zyjz clAAA f24 space-between mgn-t-100">
								<view class="f24 ">{{item.num}}</view>
								<view class="f24 ">{{item.cat_name}}</view>
							</view>

						</view>
					</view>
				</block>
			</block>

			<view v-else-if="tab === '人员管理'">
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入搜索关键字" clearButton="none" cancelButton="none"
					@confirm="search" />
				<view class="zyjz space-between mgn-l-20 mgn-r-20 mgn-b-30" v-for="(item,int) in items" :key="int">
					<view class="" style="width: 50%;">
						<view class="mgn-b-10">
							{{item.user_name}} I {{item.mobile_phone}}
						</view>
						<view class="clAAA zyjz flex-wrap">
							<text class="mgn-r-30">{{getAut(item).a}}</text>
							<text class="mgn-r-30" v-for="it in getAut(item).b">{{it.name}}</text>
						</view>
					</view>
					<view class="btns">
						<button class="cl3e8 mini-btn add mgn-r-30" size="mini" v-if="item.type === 'warehouse'"
							@click="toggle('selectW',item)">添加仓库</button>
						<button class="clAAA mini-btn del" size="mini" @click="delUer(item)">删除</button>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>

		</scroll-view>
		<view class="bottom zyjz space-between pad-l-40 pad-t-20 pad-b-20 pad-r-20 bgfff f28 cl343">
			<view class="zyjz">
				<image style="width: 68rpx;height: 68rpx;" src="../../../static/logo.png" mode="widthFix">
				</image>
				<view class="mgn-l-30 mgn-r-75">
					<view class="">
						{{infoData.user_name}}
					</view>
					<view class="">
						{{infoData.mobile_phone}}
					</view>
				</view>
			</view>
			<!-- <view class="zyjz space-between"> -->
			<block v-if="tab === '审核中'">
				<button class="f32 cl3e8 mgn-r-20" plain type="default" hover-class="none"
					@click="go('/pages/home/home?type=transfer')" v-if="infoData.type === 'warehouse' ">仓库调拨</button>
				<button class="f32" type="primary" hover-class="none" @click="go('../commom/records')">查看记录</button>
			</block>
			<block v-if="tab === '仓库管理'">
				<button class="f32 cl3e8 mgn-r-20" plain type="default" hover-class="none"
					@click="go('./product')">添加物料</button>
				<button class="f32" type="primary" hover-class="none" @click="go('./inventory?w_id='+warehouse.id)"
					v-if="infoData.type === 'warehouse' ">仓库盘点</button>
			</block>
			<!-- </view> -->
		</view>


		<uni-popup ref="popup" background-color="#fff">
			<view class="text-center">
				<view class="pad-t-20 pad-b-20" v-for="(item,int) in warehouseList" :key="int" @click="changeWarehouse(item)">
					{{item.text}}
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="selectW" background-color="#fff">
			<view class="text-center pad20">
				<view class="pad-t-20 pad-b-20" v-for="(item,int) in sclectWList" :key="int">
					<text :class="{cl3e8:item.isSelect}" @click="changeWare(item)">{{item.text}}</text>
				</view>
				<button class="mgn-t-20" type="primary" style="width: 100%;" @click="wSub">确定</button>
			</view>
		</uni-popup>


		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确定" title="警告" content="确认删除该用户？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import watermark from '@/components/watermark.vue'
	import mixins from '@/mixins/index.js'
	import business from '@/mixins/business.js'
	export default {
		mixins: [mixins, business],
		components: {
			watermark
		},
		data() {
			return {
				tab: '审核中',
				lists_url: 'user_review',
				param: {
					page: 1,
					size: 20,
					status: 200,
					keyword: null
				},
				items: [],
				warehouse: {},
				sclectWL: [],
				uId: ''
			}
		},
		computed: {
			sclectWList() {
				if (this.tab === '人员管理') {
					for (let i in this.warehouseList) {
						this.$set(this.warehouseList[i], 'isSelect', false)
						for (let s in this.sclectWL) {
							if (this.warehouseList[i].id === this.sclectWL[s].id) {
								this.$set(this.warehouseList[i], 'isSelect', true)
							}

						}
					}
				}
				return this.warehouseList
			}
		},
		onLoad() {

		},
		onShow() {
			this.get_lists();
		},
		methods: {
			search(e) {
				console.log(e);
				this.param.keyword = e.value
				this.get_lists();
			},
			wSub() {
				let obj = {
					input: {
						user_id: this.uId,
						w_ids: []
					}
				}
				this.sclectWL.map(v => {
					obj.input.w_ids.push(v.id)
				})
				this.api.post('add_warehouse', obj).then(res => {
					this.api.msg('添加成功')
					setTimeout(() => {
						this.get_lists()
					}, 2000)
					this.$refs.selectW.close()
				})
			},
			changeWare(e) {
				// for (let i in this.sclectWL) {
				// 	if (this.sclectWL[i].id === e.id) {
				// 		this.sclectWL.splice(i, 1)
				// 		return
				// 	}
				// }
				this.sclectWL.push(e)
			},
			dialogConfirm() {
				const e = this.$refs.alertDialog.data
				this.api.post('users_delete', {
					user_id: e.user_id
				}).then(res => {
					this.api.msg(res.msg)
					setTimeout(() => {
						this.get_lists()
					}, 2000)
				})
			},
			delUer(e) {
				this.$refs.alertDialog.data = e
				this.$refs.alertDialog.open()
			},
			getAut(e) {
				switch (e.type) {
					case 'user':
						return {
							a: '用户', b: [{
								name: e.class_name
							}]
						}
					case 'team':
						return {
							a: '班头', b: [{
								name: e.class_name
							}]
						}
					case 'warehouse':
						return {
							a: '仓管', b: e.warehouse
						}

				}
			},
			changeWarehouse(e) {
				this.warehouse = e
				this.param.w_id = this.warehouse.id
				this.$refs.popup.close()
				this.getList()
			},
			toggle(type, e) {
				if (type === 'selectW') {
					this.sclectWL = JSON.parse(JSON.stringify(e.warehouse))
					this.uId = e.user_id
				}
				this.$refs[type].open('bottom')
			},
			gogo(e, type) {
				if (this.tab === '审核中') {
					if (type === 'count') {
						this.go(`/pages/person/admin/inventoryReview?id=${e.id}`)
					} else if (type === 'user' || type === 'team' || type === 'warehouse') {
						this.go(`/pages/person/admin/userReview?id=${e.id}&userId=${e.user_id}`)
					} else {
						this.go(`/pages/person/commom/inReview?id=${e.id}&type=${type}`)
					}
				} else if (this.tab === '仓库管理') {

				} else if (this.tab === '人员管理') {

				}
				// this.go('../commom/inReview')
				// this.go('./returnPro')
				// this.go('./userReview')
				// this.go('./inventoryReview')

			},
			changeTab(e) {
				this.items = []
				this.tab = e
				switch (e) {
					case '审核中':
						this.param.w_id = null
						this.lists_url = 'user_review'
						this.getList();
						break
					case '仓库管理': {
						this.getWarehouse(() => {
							this.warehouse = this.warehouseList[0]
							this.param.w_id = this.warehouse.id
							this.lists_url = 'warehouse_management_list'
							this.getList();
						}, this.infoData.user_id)

						break
					}
					case '人员管理':
						this.getWarehouse()
						this.param.w_id = null
						this.lists_url = 'users'
						this.getList();
						break
				}

			},
			getList() {
				this.items = []
				this.param.page = 1
				this.get_lists();
			}
		}
	}
</script>

<style lang="less">
	.admin {
		.cl3e8 {
			color: #3E86F4 !important;
			border-color: #3E86F4 !important;
		}


		.selector {

			.selector-li {
				padding: 15rpx 60rpx;
				background: #DDEBFF;
				border: 2rpx solid #3E86F4;
				font-size: 26rpx;
			}

			.left-radius {
				border-radius: 8rpx 0rpx 0rpx 8rpx;
			}

			.right-radius {
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}

			.active {
				background: #3E86F4;
				color: #fff;
			}
		}

		.list {
			border-bottom: 1px solid #f7f7f7;

			.time {
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
				text-align: center;
				background: #DDEBFF;
				border-radius: 50%;
			}
		}

		.goods {
			position: relative;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #f7f7f7;

			.out {
				position: absolute;
				top: 20rpx;
				left: 0rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					position: absolute;
					top: 10rpx;
					left: 5rpx;
				}
			}

			image {
				width: 200rpx;
				height: 150rpx;
			}

			.clff0 {
				color: #FF0000;
			}


		}

		.btns {
			button {
				width: 150rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.add {
				background: #DDEBFF;
				border: 1rpx solid #3E86F4;
			}

			.del {
				background: #F7F7F7;
				border: 1rpx solid #EEEEEE;
			}
		}

	}
</style>